<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Error</title>
    <link data-th-href="@{/webjars/bulma/0.6.0/css/bulma.css}" rel="stylesheet">
    <link rel="stylesheet" data-th-href="@{/webjars/font-awesome/4.7.0/css/font-awesome.min.css}"/>
</head>
<body>
<div class="columns">
    <div class="column is-half is-offset-one-quarter">
        <section class="section">
            <h2 class="title">[[${status}]] - [[${error}]]</h2>
            <div class="box">
                <article class="media">
                    <div class="media-left">
                        <span class="is-size-1">馃</span>
                    </div>
                    <div class="media-content">
                        <div class="content">
                            <p>
                                <strong>Unicorn</strong>
                                <small>@unicorn</small>
                                <small>2 seconds ago</small>
                                <br>
                                Ooops! Something went wrong.
                            </p>
                        </div>
                        <nav class="level is-mobile">
                            <div class="level-left">
                                <a class="level-item">
                                    <span class="icon is-small"><i class="fa fa-reply"></i></span>
                                </a>
                                <a class="level-item">
                                    <span class="icon is-small"><i class="fa fa-retweet"></i></span>
                                </a>
                                <a class="level-item">
                                    <span class="icon is-small"><i class="fa fa-heart"></i></span>
                                </a>
                            </div>
                        </nav>
                        <article class="media">
                            <div class="media-left">
                                <span class="is-size-1">馃惣</span>
                            </div>
                            <div class="media-content">
                                <div class="content">
                                    <p>
                                        <strong>Just a Panda</strong>
                                        <small>@sadpanda</small>
                                        <small>just now</small>
                                        <br>
                                        Oh no... :-(
                                        <br>
                                        Just got a [[${status}]] [[${error}]]
                                    </p>
                                </div>
                                <nav class="level is-mobile">
                                    <div class="level-left">
                                        <a class="level-item">
                                            <span class="icon is-small"><i class="fa fa-reply"></i></span>
                                        </a>
                                        <a class="level-item">
                                            <span class="icon is-small"><i class="fa fa-retweet"></i></span>
                                        </a>
                                        <a class="level-item">
                                            <span class="icon is-small"><i class="fa fa-heart"></i></span>
                                        </a>
                                    </div>
                                </nav>
                            </div>
                        </article>
                    </div>
                </article>
            </div>
        </section>
    </div>
</div>
</body>
</html>